import React, { Component } from 'react';
import TodoListUI from './todolistUi'
import store from '../../store'
// import { Redirect } from "react-router-dom"
import { connect } from 'react-redux'
import { changeInputAction , getTodoList, addItemAction , deleteItemAction } from '../../store/actionCreatores'

// 这下面的class TodoList extends Component {}  (如果这里面没有业务逻辑的话)  可以进一步优化为无状态组件const TodoList =(props)=>{}，
// 因为connect的作用是把UI组件（无状态组件）和业务逻辑代码的分开，然后通过connect再链接到一起
// const TodoList =(props)=>{
//   let { inputValue, changeInputValue, clickBtn, list, placeholder, deleteItem } = props; // 粘贴过来后，此处要进行修改
//   return (
//     <TodoListUI
//     inputValue={inputValue}
//     placeholder={placeholder}
//     list={list}
//     changeInputValue={changeInputValue}
//     clickBtn={clickBtn}
//     deleteItem={deleteItem}
//     />
//   );
// }

class TodoList extends Component {
  constructor(props){
    // console.log('19store.getState', store.getState())
    // console.log('20props', props)
    super(props)
    this.state = store.getState()
    // 使用了react-redux中connect的方法映射之后不需要绑定this了
    // this.deleteItem = this.deleteItem.bind(this)
    // this.changeInputValue= this.changeInputValue.bind(this)
    // this.clickBtn = this.clickBtn.bind(this)
    this.storeChange = this.storeChange.bind(this)  //转变this指向
    store.subscribe(this.storeChange) //订阅Redux的状态
    // this.props.history.push('/404/')  // 重定向到404页面
  }
    render() {
        // <Redirect to="/404/" />  // 重定向到404页面  这里跳转失败了  留个坑
        // <Redirect to="http://localhost:3000/404/" />
        // 使用解构赋值优化代码  this.props.inputValue  改为inputValue就可以了，少写了好几个单词呢
        let { inputValue, changeInputValue, clickBtn, list, routelist, placeholder, deleteItem } = this.props
        return (
          <div>
            <TodoListUI
            inputValue={inputValue}
            placeholder={placeholder}
            routelist={routelist}
            list={list}
            changeInputValue={changeInputValue}
            clickBtn={clickBtn}
            deleteItem={deleteItem}
            />
          </div>
          // <TodoListUI
          // inputValue={this.props.inputValue}
          // placeholder={this.props.placeholder}
          // list={this.props.list}
          // changeInputValue={this.props.changeInputValue}
          // clickBtn={this.props.clickBtn}
          // deleteItem={this.props.deleteItem}
          // />
         );
    }
    // 这里有一个警告，不能在组件销毁后设置state，防止出现内存泄漏的情况  下次再解决 另外componentWillUpdate已经重命名为UNSAFE_componentWillUpdate()
    componentDidMount(){
      const action = getTodoList()
      store.dispatch(action)
      console.log('63storeChange,store.getState():', store.getState())
    }

    storeChange(){
      this.setState(store.getState())
      // console.log('63storeChange,store.getState():', store.getState())
    }
    // deleteItem(index) {
    //   const action = deleteItemAction(index)
    //   store.dispatch(action)
    // }
}

const stateToProps = (state)=>{
  return {
      inputValue : state.inputValue,
      routelist : state.routelist,
      list : state.list,
      placeholder : state.placeholder
  }
}
const dispatchToProps = (dispatch) =>{
  return {
    changeInputValue(e){
      // console.log(e.target.value)
      const action = changeInputAction(e.target.value)
      dispatch(action)
    },
    clickBtn(){
      const action = addItemAction()
      dispatch(action)
    },
    deleteItem(index) {
      const action = deleteItemAction(index)
      dispatch(action)
    }
  }
}

export default connect(stateToProps, dispatchToProps)(TodoList);
